<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>服务项目列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="ID"
          width="180"
          align="center">
      </el-table-column>
      <el-table-column
          prop="name"
          label="服务项目名"
          width="180"
          align="center">
      </el-table-column>
      <el-table-column
          prop="description"
          label="服务介绍"
          align="center">
      </el-table-column>
      <el-table-column
          prop="nickName"
          label="服务员"
          align="center">
      </el-table-column>
      <el-table-column
          prop="kindName"
          label="服务种类"
          align="center">
      </el-table-column>
      <el-table-column
          label="状态"
          align="center">
        <template slot-scope="scope">
        <el-switch
            @change="updateEnable(scope.row)"
            v-model="scope.row.isPass"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#999">
        </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          prop="kindsId"
          label="操作"
          align="center">
        <template slot-scope="scope">
        <el-button type="text" @click="dialogFormVisible = true,openEditDialog(scope.row)">修改</el-button>
        <el-button type="text" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  <!-- Form -->
  <el-dialog title="修改服务项目"  :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="服务项目名" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="服务项目介绍" :label-width="formLabelWidth">
        <el-input v-model="form.description" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false;set()">确 定</el-button>
    </div>

  </el-dialog>
  </div>

</template>

<script>
export default {
  name: "CategoryItemList",
  data() {
    return {
      tableData: [],
      form:{
        name:'',
        description:'',
      },
      formLabelWidth: '120px',
      dialogFormVisible: false,
    }
  },
  methods: {
    openEditDialog(k){
      let url ='http://localhost:9081/serve-item/select/'+k.id;
      console.log('url = ' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.dialogFormVisible2 = true;
          this.form = responseBody.data;
        } else {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadCategoryList();
            }
          });
        }
      });
    },
    set(){
      let url = 'http://localhost:9081/serve-item/update/' + this.form.id ;
      console.log('url = ' + url);
      let formData = this.qs.stringify(this.form);
      console.log('formData = ' + formData);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '修改类别成功！',
            type: 'success'
          });
          this.get();
          this.dialogFormVisible = false;
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.dialogFormVisible = false;
              this.loadCategoryList();
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    updateEnable(category) {
      let enableStatus = [
        {'url': '/disable', text: '禁用'},
        {'url': '/enable', text: '启用'}
      ];
      let url = 'http://localhost:9081/serve-item/update/'
          + category.id + enableStatus[category.isPass].url;
      console.log('url = ' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: enableStatus[category.enable].text + '类别成功！',
            type: 'success'
          });
          this.loadCategoryList();
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadCategoryList();
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    remove(d) {
      let url = 'http://localhost:9081/serve-item/delete/'+d.id;
      this.axios.
      create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message:  '删除成功！',
            type: 'success',
          });
          this.get();
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadCategoryList();
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }

      })
    },
    get() {
      let url = 'http://localhost:9081/serve-item/list';
      this.axios.
          create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
            let data=response.data;
        this.tableData=data.data;
        console.log('data:'+this.tableData.id)
      })
    }
  },
  mounted() {
    this.get();
  }
}
</script>

<style scoped>

</style>